<template>
  <div class="logins">
    <h1 class="logins-title">输入验证码</h1>
    <h3 class="logins-tips">验证码已发送至 {{phone}}</h3>
    <van-cell-group class="login-input-group" ref="login">
      <div class="login-item">{{value[0]}}</div>
      <div class="login-item">{{value[1]}}</div>
      <div class="login-item">{{value[2]}}</div>
      <div class="login-item">{{value[3]}}</div>
      <div class="login-item">{{value[4]}}</div>
      <div class="login-item">{{value[5]}}</div>
      <!-- <input class="login-item" v-focus v-model="value[0]" readonly onfocus="this.blur()"/>
      <input class="login-item" v-model="value[1]" readonly onfocus="this.blur()"/>
      <input class="login-item" v-model="value[2]" readonly onfocus="this.blur()"/>
      <input class="login-item" v-model="value[3]" readonly onfocus="this.blur()"/>
      <input class="login-item" v-model="value[4]" readonly onfocus="this.blur()"/>
      <input class="login-item" v-model="value[5]" readonly onfocus="this.blur()"/> -->
    </van-cell-group>
    <button class="logins-tips-btn" :disabled="isDisables" @click="resetYzm()">{{btnContent}}</button>
    <div class="login-btn">
				<button @click="login()" class="submit-bt" :disabled="value.length < 6">登录</button>
		</div>
    <van-number-keyboard
      :show="show"
      extra-key="."
      :hide-on-click-outside = false
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>
<script>
import {login, getUserByAccount} from './../../api/login';
export default {
  name: 'login',
  data () {
    return {
      phone: sessionStorage.getItem('phone'),
      value: [],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      show: true,
      inputArr: [],
      btnContent: '发送短信验证码',
      isDisables: true,
      totalTime: 60
    }
  },
  mounted () {
    this.getTips();
  },
  methods: {
    onInput (key) {
      if (this.value.length < 6) {
        this.value.push(key);
      }
      // input[this.value.length].focus();
    },
    onDelete () {
      if (this.value.length > 0) {
        this.value.splice(this.value.length - 1, 1);
      }
    },
    login () {
      let code = this.value.join('');
      const obj = {phone: this.phone, phoneCode: code};
      login(obj).then(res => {
        sessionStorage.setItem('token', res.data.token);
        this.$router.replace({name: 'home'});
      }).catch((error) => {
        this.$toast.fail(error.message);
      })
    },
    getTips () {
      this.btnContent = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.btnContent = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          this.isDisables = false;
          window.clearInterval(clock)
          this.btnContent = '重新发送验证码'
          this.totalTime = 60
        }
      }, 1000);
    },
    resetYzm () {
      const phone = {phone: this.phone}
      getUserByAccount(phone).then(res => {
        if (res.status === 200) {
          this.isDisables = true;
          this.getTips();
          sessionStorage.setItem('phone', this.phone)
        }
      }).catch(error => {
        this.$toast.fail(error.message);
      })
    }
  }
}
</script>
<style lang="less">
.logins{
  padding: 36px;
  width: calc( 100% - 72px);
  [class*=van-hairline]::after{
    border: none
  }
  .logins-title{
    height:28px;
    font-size:20px;
    font-family:PingFang SC;
    font-weight:300;
    line-height:28px;
    color:rgba(51,51,51,1);
    opacity:1;
    margin-bottom:32px;
    width: 100%;
    text-align: center;
  }
  .logins-tips{
    height:20px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:300;
    line-height:20px;
    color:rgba(204,204,204,1);
    opacity:1;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
  }
  .logins-tips-btn{
    height:20px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:300;
    line-height:20px;
    color:rgba(73,183,224,1);
    opacity:1;
    width: 100%;
    text-align: center;
    margin-bottom: 36px;
    background: #ffffff;
    border: none;
    margin-top: 20px;
    &:disabled{
      color:rgba(204,204,204,1);
    }
  }
  .login-input-group{
    border: none;
    overflow: hidden;
    .login-item{
      width: 14%;
      padding: 8px 0px 0px;
      border: 0;
      margin: 0;
      padding: 0;
      resize: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: transparent;
      min-height: 33px;
      float: left;
      margin-right: 3%;
      border-bottom: 1px solid #eee;
      &:focus{
        border-bottom: 1px solid #49B7E0;
        color: #49B7E0;
      }
      &:last-child{
        margin-right: 0px;
      }
    }
  }
  .login-btn{
    margin-top: 20px;
    .submit-bt{
      width: 100%;
      height:44px;
      background:#EDA23D;
      opacity:1;
      border-radius:30px;
      border: 1px solid #EDA23D;
      color: #fff;
      font-size: 16px;
      &:disabled{
        background:#FF8A41;
        opacity:0.8;
        border-radius:30px;
        border: 1px solid #FF8A41;
      }
    }
  }
}
</style>
